<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:90px' }"
    :wrapper-col="{ style: 'calc(100% - 90px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="用户名" name="accountName" :rules="[{ required: true, message: '请填写用户名!' }]">
      <a-input v-model:value="formState.accountName" :maxlength="20" placeholder="请选择" />
    </a-form-item>
    <a-form-item label="姓名" name="name" :rules="[{ required: true, message: '请填写姓名!' }]">
      <a-input v-model:value="formState.name" :maxlength="20" placeholder="请选择" />
    </a-form-item>
    <a-form-item label="手机号" name="phone" :rules="[{ required: true, message: '请填写手机号!' }]">
      <a-input v-model:value="formState.phone" :maxlength="20" @keyup="validateIntergeHandle($event, formState, ['phone'])" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="部门" name="deptId" :rules="[{ required: true, message: '请选择部门!' }]">
      <a-select v-model:value="formState.deptId" showSearch placeholder="请选择">
        <a-select-option v-for="(item, index) in departmentOpts" :key="index" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="备注" name="remark" :rules="[{ required: false, message: '请填写备注!' }]">
      <a-input v-model:value="formState.remark" :maxlength="50" placeholder="请选择" />
    </a-form-item>
    <!-- <a-form-item label="菜单" name="child" :rules="[{ required: true, message: '请选择菜单!' }]">
      <vxe-table
        ref="tableRef"
        height="200"
        :loading="loading"
        :column-config="{ resizable: true }"
        :tree-config="{ transform: true, childrenField: 'children', rowField: 'id', parentField: 'pid' }"
        :data="PermissionStore.flatteningMenu"
        :checkbox-config="{ labelField: 'id', highlight: true, checkStrictly: true }"
        @checkbox-change="selectChangeEvent"
        @checkbox-all="selectAllEvent"
      >
        <vxe-column type="checkbox" field="name" title="菜单名称" min-width="200" tree-node>
          <template #default="{ row }">{{ row.menuName }}</template>
        </vxe-column>
        <vxe-column field="type" title="类型" min-width="90">
          <template #default="{ row }">
            <a-tag v-if="row.type === 1" color="#108ee9">目录</a-tag>
            <a-tag v-else-if="row.type === 2" color="#87d068">菜单</a-tag>
            <a-tag v-else-if="row.type === 3" color="#f50">按钮</a-tag>
          </template>
        </vxe-column>
      </vxe-table>
    </a-form-item> -->
    <a-form-item label="数据权限" name="dataScope" :rules="[{ required: true, message: '请选择数据权限!' }]">
      <a-select v-model:value="formState.dataScope" showSearch placeholder="请选择">
        <a-select-option v-for="(item, index) in dataDict['DATA_PERMISSION']" :key="index" :value="item.code">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="状态" name="status" :rules="[{ required: true, message: '请选择状态!' }]">
      <a-select v-model:value="formState.status" showSearch placeholder="请选择">
        <a-select-option :value="1">启用</a-select-option>
        <a-select-option :value="0">停用</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { nextTick, toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";
import PermissionStore from "@/store/modules/permission";
import { getCustomerInfoApi } from "@/api/client/configCenter/accountManagement";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: ClientAddressManagement.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { dataDict, convertToTree, flattening } = CommonHook();
const { visible, passData, type } = toRefs(props);
const { formDataRef, tableRef, formState, loading, departmentOpts, getDepartmentOpts } = InitHook();
const {
  onFinish,
  onFinishFailed,
  resetFields,
  resetHandle,
  validateIntergeHandle
  // selectChangeEvent,
  // selectAllEvent
} = OperationHook({
  formDataRef,
  formState,
  passData,
  emit,
  type,
  loading,
  convertToTree,
  flattening
});
const init = () => {
  if (type.value === 2) {
    loading.value = true;
    getCustomerInfoApi({ id: passData.value.id })
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          Object.assign(formState, data);
          formState.child = flattening(data.child || []);
          const checkedMenus: Array<Base.GeneraDataType> = [];
          const checkedMenuIds = formState.child.map((t: any) => t.id);
          for (let i = 0; i < PermissionStore.flatteningMenu.length; i++) {
            const target = PermissionStore.flatteningMenu[i];
            if (checkedMenuIds.includes(target.id)) checkedMenus.push(target);
          }
          nextTick(() => {
            tableRef.value.setAllTreeExpand(true);
            tableRef.value.setCheckboxRow(checkedMenus, true);
          });
        }
      })
      .finally(() => (loading.value = false));
  }
  tableRef.value && tableRef.value.setAllTreeExpand(true);
  getDepartmentOpts();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
      tableRef.value.setCheckboxRow(PermissionStore.flatteningMenu, false);
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
:deep(.ant-input-number){
    width: 100%;
}
</style>
